<template>
    <div class="decorate-user flex">
        <decorate-phone
            :component="component"
            :disabledDrag="true"
        />
        <decorate-attr :config="{setBg: false}" />
    </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import DecorateWidget from '@/components/decorate/decorate-widget.vue'
import DecoratePhone from '@/components/decorate/decorate-phone.vue'
import DecorateAttr from '@/components/decorate/decorate-attr.vue'
import { apiThemePageDetail } from '@/api/shop'
@Component({
    components: {
        DecorateWidget,
        DecoratePhone,
        DecorateAttr,
    },
})
export default class DecorateUser extends Vue {
    /** S data **/
    component = [
        {
            name: 'userinfo',
            operate: ['hidden'],
        },
        {
            name: 'userorder',
            operate: ['hidden'],
        },
        {
            name: 'userserve',
            operate: ['hidden'],
        },
        {
            name: 'goodsrecom',
            operate: ['hidden'],
        },
    ]
    pagesInfo = {
        name: '个人中心',
        type: 3,
        id: 11,
        common: {
            title: '个人中心',
            background_type: '0',
            bg_color: '#F5F5F5',
            background_image: '',
        },
    }
    pageData = [
        {
            title: '会员信息',
            name: 'userinfo',
            show: 1,
            content: {
                style: 1,
                background_image: '',
                background_type: 1,
                avatar_type: 1,
                avatar: '',
                assets: [1, 2, 3, 4],
                show_user_sn: 1,
                show_member: 1,
            },
            styles: {},
        },
        {
            title: '我的订单',
            name: 'userorder',
            show: 1,
            content: {
                text: '我的订单',
                pay_icon: '',
                pay_name: '待付款',
                delivery_icon: '',
                delivery_name: '待发货',
                take_icon: '',
                take_name: '待收货',
                comment_icon: '',
                comment_name: '待收货',
                sale_icon: '',
                sale_name: '待收货',
            },
            styles: {
                root_bg_color: '',
                bg_color: '#FFFFFF',
                border_radius_top: 0,
                border_radius_bottom: 0,
                padding_top: 10,
                padding_horizontal: 0,
                padding_bottom: 0,
            },
        },
        {
            title: '我的服务',
            name: 'userserve',
            show: 1,
            content: {
                text: '我的服务',
                data: [{}, {}, {}, {}],
            },
            styles: {
                root_bg_color: '',
                bg_color: '#FFFFFF',
                border_radius_top: 0,
                border_radius_bottom: 0,
                padding_top: 10,
                padding_horizontal: 0,
                padding_bottom: 0,
            },
        },
        {
            title: '为您推荐',
            name: 'goodsrecom',
            show: 1,
            content: {
                style: 1,
                header_title: '为您推荐',
                show_title: 1,
                show_price: 1,
                show_scribing_price: 1,
                show_btn: 1,
                btn_text: '购买',
                btn_bg_type: 1,
                data: [],
                tips: '根据系统算法，推荐用户购买商品的同分类10款商品。优先推荐高销量且排序在前的商品。 如果用户没有购买商品，则按商品销量和排序进行推荐。',
            },
            styles: {
                header_title_color: '#333333',
                header_title_size: 20,
                title_color: '#101010',
                scribing_price_color: '#999999',
                price_color: '#FF2C3C',
                btn_bg_color: '#FF2C3C',
                btn_color: '#FFFFFF',
                btn_border_radius: 30,
                btn_border_color: '',
                root_bg_color: '',
                bg_color: '#FFFFFF',
                margin: 10,
                padding_top: 10,
                padding_horizontal: 10,
                padding_bottom: 10,
                border_radius_top: 4,
                border_radius_bottom: 4,
            },
        },
    ]
    /** E data **/

    /** S computed **/

    /** E computed **/

    /** S methods **/

    async getPages() {
        this.$store.dispatch('getPages', { type: 3 })
        //  this.$store.commit('setPagesInfo', this.pagesInfo)
        // this.$store.commit('setPagesData', this.pageData)
    }

    /** E methods **/
    /** S life cycle **/
    created() {
        this.getPages()
    }
    /** E life cycle **/
}
</script>
<style lang="scss" scoped>
.decorate-user {
    height: calc(100vh - #{$--header-height});
}
</style>
